<template>
    <div>
        <div>
            <center>
                <h2>理赔单统计图表</h2>
            </center>
            <div id="myChart" :style="{width:'800px',height:'600px'}"></div>
        </div>
        <el-dialog title="意外保单详情" :visible.sync="dialogFormVisible5" width="500px" >
            <el-form :model="content2">
                <el-form-item label="保单号" label-width="90px">
                    <el-input v-model="content2.accidentOrder.id" autocomplete="off" placeholder="保单号" disabled></el-input>
                </el-form-item>
                <el-form-item label="起始日期" label-width="90px">
                    <el-input v-model="content2.accidentOrder.beginDay" autocomplete="off" placeholder="保单开始日期" disabled></el-input>
                </el-form-item>
                <el-form-item label="结束日期" label-width="90px">
                    <el-input v-model="content2.accidentOrder.endDay" autocomplete="off" placeholder="保单结束日期" disabled></el-input>
                </el-form-item>
                <span>投保人</span>
                <el-form-item label="姓名" label-width="90px">
                    <el-input v-model="content2.policyHolder.phName" autocomplete="off" placeholder="姓名" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证号" label-width="90px">
                    <el-input v-model="content2.policyHolder.phIdcard" autocomplete="off" placeholder="身份证" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机号" label-width="90px">
                    <el-input v-model="content2.policyHolder.phPhone" autocomplete="off" placeholder="手机号" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="90px">
                    <el-input v-model="content2.policyHolder.phEmail" autocomplete="off" placeholder="邮箱" disabled></el-input>
                </el-form-item>
                <span>被保人</span>
                <el-form-item label="姓名" label-width="90px">
                    <el-input v-model="content2.insured.inName" autocomplete="off" placeholder="姓名" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证号" label-width="90px">
                    <el-input v-model="content2.insured.inIdcard" autocomplete="off" placeholder="身份证" disabled></el-input>
                </el-form-item>
                <el-form-item label="与投保人关系" label-width="90px">
                    <el-input v-model="content2.insured.inRelationship" autocomplete="off" placeholder="与投保人关系" disabled></el-input>
                </el-form-item>
                <span>金额流水（单位:元）</span>
                <el-form-item label="付款金额" label-width="90px">
                    <el-input v-model="content2.bxOrder.totalAmount" autocomplete="off" placeholder="付款金额" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible5 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible5 = false">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="车险保单详情" :visible.sync="dialogFormVisible4" width="500px" >
            <el-form :model="content1">
                <el-form-item label="保单号" label-width="90px">
                    <el-input v-model="content1.carOrder.id" autocomplete="off" placeholder="保单号" disabled></el-input>
                </el-form-item>
                <el-form-item label="车牌号" label-width="90px">
                    <el-input v-model="content1.carOrder.carId" autocomplete="off" placeholder="车牌号" disabled></el-input>
                </el-form-item>
                <el-form-item label="车座数" label-width="90px">
                    <el-input v-model="content1.carOrder.seatNumber" autocomplete="off" placeholder="车座数" disabled></el-input>
                </el-form-item>
                <el-form-item label="车辆类型" label-width="90px">
                    <el-input v-model="content1.carOrder.carType" autocomplete="off" placeholder="车辆类型" disabled></el-input>
                </el-form-item>
                <el-form-item label="起始日期" label-width="90px">
                    <el-input v-model="content1.carOrder.beginDay" autocomplete="off" placeholder="保单开始日期" disabled></el-input>
                </el-form-item>
                <el-form-item label="结束日期" label-width="90px">
                    <el-input v-model="content1.carOrder.endDay" autocomplete="off" placeholder="保单结束日期" disabled></el-input>
                </el-form-item>
                <span>投保人</span>
                <el-form-item label="姓名" label-width="90px">
                    <el-input v-model="content1.policyHolder.phName" autocomplete="off" placeholder="姓名" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证号" label-width="90px">
                    <el-input v-model="content1.policyHolder.phIdcard" autocomplete="off" placeholder="身份证" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机号" label-width="90px">
                    <el-input v-model="content1.policyHolder.phPhone" autocomplete="off" placeholder="手机号" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="90px">
                    <el-input v-model="content1.policyHolder.phEmail" autocomplete="off" placeholder="邮箱" disabled></el-input>
                </el-form-item>
                <span>被保人</span>
                <el-form-item label="姓名" label-width="90px">
                    <el-input v-model="content1.insured.inName" autocomplete="off" placeholder="姓名" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证号" label-width="90px">
                    <el-input v-model="content1.insured.inIdcard" autocomplete="off" placeholder="身份证" disabled></el-input>
                </el-form-item>
                <el-form-item label="与投保人关系" label-width="90px">
                    <el-input v-model="content1.insured.inRelationship" autocomplete="off" placeholder="与投保人关系" disabled></el-input>
                </el-form-item>
                <span>金额流水（单位:元）</span>
                <el-form-item label="付款金额" label-width="90px">
                    <el-input v-model="content1.bxOrder.totalAmount" autocomplete="off" placeholder="付款金额" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible4 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible4 = false">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="审核通过邮件回复" :visible.sync="dialogFormVisible" width="500px" >
            <el-form :model="reply">
                <el-form-item label="回复内容" label-width="90px">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="回复内容"
                            v-model="reply.content">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sendReply">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="驳回邮件回复" :visible.sync="dialogFormVisible2" width="500px" >
            <el-form :model="reply">
                <el-form-item label="回复内容" label-width="90px">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="回复内容"
                            v-model="reply.content">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="sendReply">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="证明材料" :visible.sync="dialogFormVisible3" width="500px" >
            <el-table :data="pictures" border >
                <el-table-column
                        prop="name"
                        label="序号"
                        width="150">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="pic(scope.row)">查看图片</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible3 = false">确 定</el-button>
            </div>
        </el-dialog>


        <el-button type="primary" round style="margin:20px;" @click="exportExcelSelect">导出Excel</el-button>
        <el-table :data="dataList" border @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection">
            </el-table-column>
            <el-table-column
                    prop="reportNumber"
                    label="理赔单号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="claimNo"
                    label="保单号"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="保险类型"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="原因详情"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="reportTime"
                    label="报案时间"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="carOrderStatus"
                    label="审核状态"
                    width="120"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="操作" width="450">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="baodan(scope.row)">查看保单详情</el-button>
                    <el-button
                            size="mini"
                            @click="showPic(scope.row)">查看证明材料</el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="showDetails(scope.row)">审核通过</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="showSend(scope.row)">审核驳回</el-button>
                </template>
            </el-table-column>
        </el-table>



        <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
            <el-table :data="selectData" id="selectTable" height="380px">
                <el-table-column
                        prop="reportNumber"
                        label="理赔单号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="claimNo"
                        label="保单号"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="保险类型"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="原因详情"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="reportTime"
                        label="报案时间"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="carOrderStatus"
                        label="审核状态"
                        width="120"
                        :show-overflow-tooltip="true">
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exportExcel">确定保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import htmlToExcel from '@/utils/htmlToExcel'
import * as echarts from "echarts";
export default {
    name: "lipeimanage",
    mounted() {
        this.init();
    },
    data() {
        return {
            selectData:[],
            selectWindow:false,
            chart:[],
            content2: {
                policyHolder: {
                    id: "1440333280749563906",
                    phName: "小明",
                    phIdcard: "423213124131",
                    phGender: "男",
                    phBirthday: null,
                    phPlace: "东莞",
                    phPhone: "14374362421",
                    phEmail: "124312453@qq.com"
                },
                insured: {
                    id: "1440333280875393026",
                    inName: "小米",
                    inRelationship: "配偶",
                    inIdcard: "423213124131",
                    inGender: "男",
                    inBirthday: null
                },
                bxOrder: {
                    orderNo: "1440333280942501889",
                    subject: "乐驾人生·驾驶员及随车人员意外险（套餐版：保期一年）",
                    totalAmount: 0.02,
                    orderStatus: null,
                    createTime: null,
                    lastTime: null,
                    updateTime: null
                },
                userMessage: {
                    uid: "1439122695939416066",
                    uintegral: 0,
                    uemail: "1970475803@qq.com",
                    uplace: "广东",
                    uphone: "13134234243",
                    uidcard: "214233656421434",
                    ubirthday: "2021-09-05",
                    ugender: "man",
                    uname: "羊居原",
                    unickname: null
                },
                carOrder: null,
                accidentOrder: {
                    id: "1440333281076719617",
                    orderId: "1440333280942501889",
                    phId: "1440333280749563906",
                    inId: "1440333280875393026",
                    insuranceId: "1439235505675542529",
                    beginDay: "2021-09-21 23:13:09",
                    endDay: "2022-09-21 23:13:09",
                    earnedWay: "法定",
                    accidentOrderStatus: 1,
                    uid: "1439122695939416066"
                }
            },
            content1: {
                policyHolder: {
                    id: "1439953244892741633",
                    phName: "刘思博",
                    phIdcard: "423213124131",
                    phGender: "man",
                    phBirthday: null,
                    phPlace: "东莞",
                    phPhone: "18925540371",
                    phEmail: "liusibo61@foxmail.com"
                },
                insured: {
                    id: "1439953244959850498",
                    inName: "红米",
                    inRelationship: "parent",
                    inIdcard: "423213124131",
                    inGender: "man",
                    inBirthday: null
                },
                bxOrder: {
                    orderNo: "1439953245089873922",
                    subject: "乐驾人生·驾驶员及随车人员意外险（套餐版：保期一年）",
                    totalAmount: 0.01,
                    orderStatus: null,
                    createTime: null,
                    lastTime: null,
                    updateTime: null
                },
                userMessage: {
                    uemail: "1970475803@qq.com",
                    unickname: null,
                    uidcard: "214233656421434",
                    uphone: "13134234243",
                    uplace: "广东",
                    uname: "羊居原",
                    ubirthday: "2021-09-05",
                    ugender: null,
                    uid: "1439122695939416066"
                },
                carOrder: {
                    id: "1439953245152788482",
                    orderId: "1439953245089873922",
                    phId: "1439953244892741633",
                    inId: "1439953244959850498",
                    insuranceId: "1439124412101812225",
                    beginDay: "2021-09-20 22:03:01",
                    endDay: "2022-09-20 22:03:01",
                    carId: "沪A777777",
                    seatNumber: 5,
                    carType: "small",
                    earnedWay: "法定",
                    carOrderStatus: 1,
                    uid: "1439122695939416066"
                }
            },
            pictures:[],
            dialogFormVisible: false,
            dialogFormVisible2: false,
            dialogFormVisible3: false,
            dialogFormVisible4: false,
            dialogFormVisible5: false,
            dataList:[],
            form: {
                ccName: '',
                ccEmail: '',
                ccPhone: '',
                ccCategory: '',
                ccContext: ''
            },
            reply: {
                reportNumber:'',
                uId:'',
                carOrderStatus:'',
                content:''
            }
        }
    },
    methods:{
        baodan(row){
            if(row.type === "车险"){
                let vm = this;
                let id = row.claimNo;
                this.axios({
                    url: '/myapi/user/carOrder/get/'+id,
                    method: 'get'
                }).then(function (response) {
                    if(response.data.success === true){
                        //vm.content = response.data.content;
                        console.log(response.data.content);
                        vm.content1 = response.data.content;
                        vm.dialogFormVisible4 = true;
                    }
                    else {
                        vm.$message.error('获取失败');
                    }
                });
            }
            else if(row.type === "意外险"){
                let vm = this;
                let id = row.claimNo;
                this.axios({
                    url: '/myapi/user/accidentOrder/get/'+id,
                    method: 'get'
                }).then(function (response) {
                    if(response.data.success === true){
                        console.log(response.data.content);
                        vm.content2 = response.data.content;
                        vm.dialogFormVisible5 = true;
                    }
                    else {
                        vm.$message.error('获取失败');
                    }
                });
            }
        },
        init(){
            let vm = this;
            this.axios({
                url: '/myapi/user/claim/list',
                method: 'get'
            }).then(function (response) {
                if(response.data.success===true){
                    vm.dataList = response.data.content;
                    console.log(vm.dataList);

                }
                else {
                    vm.$message.error('后端未知错误');
                }
            });



            let chartDom = document.getElementById('myChart');
            let myChart = echarts.init(chartDom);
            let option;
            axios.get('/myapi/user/claim/chart').then(function (response) {
                if(response.data.success === true){
                    //console.log(response.data);
                    vm.chart = response.data.content;
                    option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '统计人数',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: []
                            }
                        ]
                    };
                    option.series[0].data = vm.chart;
                    option && myChart.setOption(option);
                }
            });
        },
        showPic(row){
            this.dialogFormVisible3 = true;
            let vm = this;
            this.axios({
                url: '/myapi/user/claim/listPivture/'+row.reportNumber,
                method: 'get'
            }).then(function (response) {
                if(response.data.success===true){
                    vm.pictures = response.data.content;
                    console.log(vm.pictures);
                }
                else {
                    vm.$message.error('失败');
                }
            });
        },
        pic(row){
            window.open("http://"+row.pictureUrl);
        },
        showDetails(row){
            console.log(row);
            this.reply.reportNumber = row.reportNumber;
            this.reply.uId = row.uid;
            this.reply.carOrderStatus = '审核通过';
            this.reply.content = "";
            this.dialogFormVisible = true;
        },
        showSend(row){
            console.log(row);
            this.reply.reportNumber = row.reportNumber;
            this.reply.uId = row.uid;
            this.reply.carOrderStatus = '驳回';
            this.reply.content = "";
            this.dialogFormVisible2 = true;
        },
        sendReply(){
            let vm = this;
            //axios
            this.axios({
                url: '/myapi/user/claim/updateClaimStatus/'+vm.reply.reportNumber+'/'+vm.reply.uId+'/'+vm.reply.carOrderStatus+'/'+vm.reply.content,
                method: 'post'
            }).then(function (response) {
                if(response.data.success===true){
                    vm.$message({
                        message: '处理成功!',
                        type: 'success'
                    });
                    vm.init();
                }
                else {
                    vm.$message.error('已审核，请勿重复审核');
                }
            });
            vm.dialogFormVisible = false;
            vm.dialogFormVisible2 = false;
        },

        exportExcel() {
            htmlToExcel.getExcel('#selectTable','理赔单审核报表')
        },
        exportExcelSelect(){
            if (this.selectData.length < 1){
                this.$message.error('请选择要导出的内容！');
                return false;
            }
            this.selectWindow = true;
        },
        handleSelectionChange(val) {
            this.selectData = val;
        }

    }
}
</script>

<style scoped>

</style>
